<template>
  <section class="gly-item">
    <router-link to="/finance/detail">
        <h2>
          <span v-if="funds.is_specify">密•</span>
          <span>抵•</span>
          11月16号 15:00 1月 奥迪一号标
        </h2>
        <div class="funds-content">
          <p>100.00元起购，{{funds.startTime}}开标</p>
          <div class="opt-profit clear">
            <div class="left opt-amount">
              <span>项目金额</span>
              <p class="opt-bigorange">50000.00元</p>
            </div>
            <div class="left opt-left">
                <span>预期年化利率</span>
                <p class="opt-bigorange">{{(parseFloat(funds.loan_rate)).toFixed(2)}}%</p>
            </div>
            <div class="left">
                <span>理财期限</span>
                <p><span class="opt-bigdays">{{funds.term}}<span v-show="funds.term_unit == '月'">个</span></span>{{funds.term_unit}}</p>
            </div>
          </div>
          <div class="opt-countdown">
            <div class="opt-ctdline clear">
              <div class="left line-left"><mt-progress :value="20" :bar-height="5"></mt-progress></div>
              <div class="left line-right">20%</div>
            </div>
            <div class="opt-cdwrap">
                <p v-if="!funds.endCountDown">开标倒计时</p>
                <p v-else>可以抢标啦！</p>
                <div class="opt-cdbtn">                    
                  <count-down :currentTime="gmt_start" :startTime="gmt_start" :endTime="getBidTime(funds.endTime)" :dayTxt="'天'" :hourTxt="'小时'" :minutesTxt="'分钟'" :secondsTxt="'秒'" v-on:end_callback="countDownE_cb(1)"></count-down>
                  <div v-show="funds.endCountDown" :class="{'count-down-end':funds.endCountDown}">立即投标</div>
                </div>
            </div>           
          </div>
        </div>
      </router-link>
    </section>
</template>

<script>
import CountDown from 'vue2-countdown';
export default {
  name: 'fundComponent',
  components: {CountDown},
  props:{
    startTime:String,
    endTime:String,
    funds:Object    
  },
  data () {
    return {
      gmt_start:0
    }
  },
  created(){
    this.gmt_start = new Date(this.startTime).getTime();
  },
  methods: {
    countDownE_cb: function (x) {
      console.log("countDownE_cb:",x)
      this.funds.endCountDown = true;
    },
    getBidTime:function (val) {
        if(val){
            return new Date(Date.parse(val.replace(/-/g, "/"))).getTime() / 1000;
        }else{
            return 0;
        }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
section.gly-item {
  width: 94%;
  font-size: 85%;
  margin: 1rem auto 0 auto;
  background:#fff;
  padding: 1.2rem 0 1.2rem 0;
  h2 {
    font-size: 110%;
    height: 2rem;
    line-height: 2rem;
    font-weight:normal;      
    span {      
      background: url("../assets/images/titbgs/bg1.png") no-repeat left top;
      display:inline-block; 
      color:#fff;    
      padding: 0 1.5rem;   
      height: 2.2rem;
      line-height: 1.8rem;
      margin-left: -6px; 
    }
  } 
  .funds-content {
    >p {
      text-align:center;
      padding-left: .6rem;
      margin-top: .5rem;
      color:#fdb563;
    }
    .opt-profit {
      width: 100%;
      margin: 2rem auto 0 auto;
      div {
        width: 33.33%;
        text-align:center;
        border-right: 1px solid #ddd;
      }
      div:last-child {
        border-right: none;
      }
      .opt-bigorange {
        color:#fa5e5e;
        font-size: 140%;
      }
      .opt-bigdays {
        color: #00d398;
        font-size: 140%;
      }
    }
  } 
  .opt-countdown {
    width: 80%;
    margin: 2rem auto 0 auto;
    .opt-ctdline {
      display:none;
      width: 80%;
      margin: 0 auto;
      .line-left {
        width: 86%;
      }
      .line-right {
        width: 12%;
        margin-left: 2%;
      }
    }
    .opt-cdwrap {
      >p {
        text-align: center;
      }
      .opt-cdbtn {
        width: 80%;
        margin: .5rem auto 0 auto;
        height: 2.4rem;
        line-height: 2.4rem;
        text-align: center;
        background: #ccc;
        border-radius: 5px;
        .count-down-end {
          background:#f30007;
          color:#fff;
        }

      }
    }
  }  
}

 
</style>
